import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  DownloadOutlined,
  DownOutlined,
  PlusOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Dropdown,
  Menu,
  Modal,
  message,
  Radio,
  Divider,
  Tabs,
  DatePicker,
} from 'antd';
import Link from 'umi/link';
import queryString from 'query-string';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TextOverFlow from '../../components/TextOverFlow';
import Area from '../../components/Area';
import ServiceRemark from '../../components/ServiceRemark';
import styles from '@/utils/utils.less';
import downloadFile from '@/utils/utils';
import { checkPermissions } from '@/utils/authority';
import Customer from '../../components/Customer';
import SearchPersonEs from '../../components/SearchPersonEs';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
@connect(
  ({
    card: { data, detailHdl, activeKey, formFieldsValue, tabList, expandForm },
    login,
    loading,
  }) => ({
    login,
    data,
    detailHdl,
    activeKey,
    formFieldsValue,
    tabList,
    expandForm,
    loading: loading.models.card,
  })
)
@Form.create()
class TableList extends PureComponent {
  state = {
    visGrants: false,
    selectedRows: [],
    selectedRowKeys: [],
    flag: false,
    visHdlRemark: false,
    issWayArr: [
      { itemCode: '1', itemName: '现场发放' },
      { itemCode: '2', itemName: '快递邮寄' },
      { itemCode: '3', itemName: '社保机构发放' },
    ],
  };

  tableSearchLayout = {
    labelCol: { md: { span: 7 } },
    wrapperCol: { md: { span: 17 } },
  };

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      data: { pagination },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'card/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.getList(tempActiveKey, pagination.current, pagination.pageSize);
    }
  }

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys,
      selectedRows,
    });
  };

  // 查询列表
  getList = (activeKey = '1', currentPage = 1, pageSize = 10, queryParam, isClear = true) => {
    const { dispatch, form } = this.props;
    if (isClear) {
      this.setState({
        selectedRows: [],
        selectedRowKeys: [],
      });
    }
    form.validateFields(
      ['empName', 'certNo', 'custId', 'areaId', 'dateArr', 'blngCs', 'creId'],
      (err, fieldsValue) => {
        let temp = fieldsValue;
        if (err) return;
        temp = queryParam || temp;
        dispatch({
          type: 'card/updateModelData',
          payload: { formFieldsValue: temp, activeKey },
        });
        const formFieldsValue = {};
        Object.keys(temp).forEach(key => {
          if (key === 'dateArr') {
            formFieldsValue.beginTime =
              (temp.dateArr && temp.dateArr[0] && temp.dateArr[0].format('YYYY-MM-DD')) || null;
            formFieldsValue.endTime =
              (temp.dateArr && temp.dateArr[1] && temp.dateArr[1].format('YYYY-MM-DD')) || null;
          } else {
            formFieldsValue[key] =
              temp[key] === undefined || temp[key] === null ? null : temp[key].trim();
          }
          delete formFieldsValue.dateArr;
        });
        const pageArg = { currentPage, pageSize };
        const values = {
          insCardHdlVo: {
            state: activeKey,
            ...formFieldsValue,
          },
          pageArg,
        };
        dispatch({
          type: 'card/fetchList',
          payload: values,
        });
      }
    );
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ dateArr: null });
    dispatch({
      type: 'card/updateModelData',
      payload: { formFieldsValue: {} },
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'card/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 点击复选框
  handleSelectRows = (rows, rowKeys) => {
    this.setState({ selectedRows: rows, selectedRowKeys: rowKeys });
  };

  changeTabPane = activeKey => {
    router.push({
      pathname: '/socialinsurancemanagement/socialcard/index',
      query: {
        activeKey,
      },
    });
    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.getList(activeKey);
    });
  };

  // 取消办理
  cancelDeal = (insCardHdlId, vno) => {
    const value = [{ insCardHdlId, vno }];
    Modal.confirm({
      title: `你确定要取消办理吗？`,
      icon: <QuestionCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.cancelDealPort(value);
      },
    });
  };

  cancelDealPort = value => {
    const { activeKey, dispatch } = this.props;
    dispatch({
      type: 'card/cancelToDeal',
      payload: value,
      callback: isDisabled => {
        if (isDisabled) {
          this.getList(activeKey);
          message.success('取消办理成功！');
        } else {
          message.warning('取消办理失败!');
        }
      },
    });
  };
  // 办理结果导入

  hdlExport = () => {
    router.push('/socialinsurancemanagement/socialcard/batch');
  };

  // 开始办理
  toDeal = (insCardHdlId, vno) => {
    const value = [{ insCardHdlId, vno }];
    Modal.confirm({
      title: `你确定要开始办理吗？`,
      icon: <QuestionCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.toDealPort(value);
      },
    });
  };

  downExcel = () => {
    const { login, form, activeKey } = this.props;
    const { systemList } = login;
    let userType;
    systemList.forEach(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    form.validateFields(
      ['empName', 'certNo', 'custId', 'areaId', 'dateArr', 'creId'],
      (err, fieldsValue) => {
        if (err) return;
        const temp = fieldsValue;
        Object.keys(fieldsValue).forEach(key => {
          if (temp[key] === undefined) {
            temp[key] = null;
          } else if (key === 'dateArr') {
            temp.beginTime = temp.dateArr[0].format('YYYY-MM-DD');
            temp.endTime = temp.dateArr[1].format('YYYY-MM-DD');
            delete temp[key];
          }
        });
        temp.state = activeKey;
        downloadFile(
          temp,
          Number(userType) === 3
            ? '/esApi/insCardHdl/downloadExcel'
            : '/osApi/insCardHdl/downloadExcel',
          'POST'
        );
      }
    );
  };

  outExcel = () => {
    const { login } = this.props;
    const { systemList } = login;
    let userType;
    systemList.forEach(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    const { selectedRows, selectedRowKeys } = this.state;
    if (selectedRows.length) {
      this.setState({
        excelLoading: true,
      });
      downloadFile(
        { insCardHdlIds: selectedRowKeys },
        Number(userType) === 3
          ? '/esApi/insCardHdl/downloadExcel'
          : '/osApi/insCardHdl/downloadExcel',
        'POST',
        () => {
          this.setState({
            excelLoading: false,
          });
        }
      );
    } else {
      Modal.confirm({
        title: `将对当前列表全部数据进行操作,是否继续？`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  toDealBatch = () => {
    const {
      data: {
        pagination: { total },
      },
    } = this.props;
    const { selectedRows } = this.state;
    if (total) {
      if (selectedRows.length) {
        Modal.confirm({
          title: `是否对当前列表${selectedRows.length}条数据进行办理？`,
          icon: <QuestionCircleOutlined />,
          okText: '是',
          cancelText: '否',
          onOk: () => {
            const value = [];
            selectedRows.forEach(item => {
              value.push({ vno: item.vno, insCardHdlId: item.insCardHdlId });
            });
            this.toDealPort(value);
          },
        });
      } else {
        Modal.confirm({
          title: `将对当前页签下的全部数据进行操作，是否继续？`,
          icon: <QuestionCircleOutlined />,
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            const value = [];
            this.toDealPort(value);
          },
        });
      }
    } else {
      message.warning('没有数据可开始办理');
    }
  };

  toDealPort = value => {
    const { activeKey, dispatch } = this.props;
    dispatch({
      type: 'card/updateToDeal',
      payload: value,
      callback: isDisabled => {
        if (isDisabled) {
          this.getList(activeKey);
          message.success('开始办理成功！');
        } else {
          message.warning('开始办理失败!');
        }
      },
    });
  };

  toDealComplete = (insCardHdlId, vno) => {
    const value = [{ insCardHdlId, vno }];
    Modal.confirm({
      title: `你确定要完成办理吗？`,
      icon: <QuestionCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.toDealCompletePort(value);
      },
    });
  };

  toDealCompleteBatch = () => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      Modal.confirm({
        title: `是否对当前列表${selectedRows.length}条数据标记办理成功?`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          const value = [];
          selectedRows.forEach(item => {
            value.push({ vno: item.vno, insCardHdlId: item.insCardHdlId });
          });
          this.toDealCompletePort(value);
        },
      });
    } else {
      message.warning('请至少选择一条数据！');
    }
  };

  toDealCompletePort = value => {
    const { activeKey, dispatch } = this.props;
    dispatch({
      type: 'card/updateToDealComplete',
      payload: value,
      callback: isDisabled => {
        if (isDisabled) {
          this.getList(activeKey);
          message.success('办理完成成功！');
        } else {
          message.warning('办理完成失败!');
        }
      },
    });
  };

  hdlRemark = insCardHdlId => {
    const { dispatch } = this.props;
    this.setState({
      busiId: insCardHdlId,
    });
    this.handleModalVisible(true);
    dispatch({
      type: 'card/detailHdlRemark',
      payload: { busiId: insCardHdlId },
    });
  };

  grant = record => {
    const { form } = this.props;
    form.resetFields([
      'issWay',
      'exprsAddr',
      'exprsNo',
      'exprsCorpName',
      'exprsCorpName',
      'issRemark',
    ]);
    this.setState({
      visGrants: true,
      grantData: record,
    });
  };

  okGrants = () => {
    const { grantData, selectedRows } = this.state;
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      const value = [];
      if (grantData) {
        value.push({ ...fieldsValue, insCardHdlId: grantData.insCardHdlId, vno: grantData.vno });
      } else {
        selectedRows.forEach(item => {
          value.push({ ...fieldsValue, vno: item.vno, insCardHdlId: item.insCardHdlId });
        });
      }
      this.okGrantsPort(value);
    });
  };

  grantsBatch = () => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      this.setState({
        visGrants: true,
      });
    } else {
      message.warning('请至少选择一条数据！');
    }
  };

  okGrantsPort = value => {
    const { activeKey, dispatch } = this.props;
    dispatch({
      type: 'card/updateGrants',
      payload: value,
      callback: isDisabled => {
        if (isDisabled) {
          this.getList(activeKey);
          message.success('发放成功！');
        } else {
          message.warning('发放失败!');
        }
        this.setState({
          visGrants: false,
          grantData: undefined,
          selectedRows: [],
          btnShow: '1',
        });
      },
    });
  };

  cancelGrants = () => {
    this.setState({
      visGrants: false,
      grantData: undefined,
      selectedRows: [],
      btnShow: '1',
    });
  };

  // 批量发放
  grantExport = () => {
    router.push('/socialinsurancemanagement/socialcard/grantbatch');
  };

  onChangeIssWay = e => {
    if (e.target.value) {
      this.setState({
        flag: true,
        btnShow: e.target.value,
      });
    }
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch } = this.props;
    const { busiId } = this.state;
    dispatch({
      type: 'card/addHdlRemark',
      payload: { ...values, busiId, busiType: 4 },
      callback: response => {
        if (response.success) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    const { queryParam } = location;
    await this.resetSearch();
    await this.getList(location.query.activeKey, undefined, undefined, queryParam);

    dispatch({
      type: 'card/updateModelData',
      payload: { expandForm: Boolean(queryParam) },
    });
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      activeKey,
      formFieldsValue,
    } = this.props;

    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={() => this.getList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      activeKey,
      formFieldsValue,
    } = this.props;
    const dateFormat = 'YYYY-MM-DD';
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.tableSearchLayout}>
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(
                <Customer
                  attr
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="执行地" {...this.tableSearchLayout}>
              {getFieldDecorator('areaId', {
                initialValue: formFieldsValue.areaId,
              })(
                <Area
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="所属客服">
              {getFieldDecorator('blngCs', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.blngCs,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="创建人">
              {getFieldDecorator('creId', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.creId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" {...this.tableSearchLayout}>
              {getFieldDecorator('dateArr', {
                rules: [{ type: 'array' }],
                initialValue: formFieldsValue.dateArr,
              })(
                <RangePicker
                  format={dateFormat}
                  placeholder={['开始时间', '结束时间']}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24} offset={8}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={() => this.getList(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起
                  <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { loading, data, detailHdl, tabList, activeKey } = this.props;
    const {
      selectedRows,
      selectedRowKeys,
      flag,
      issWayArr,
      visHdlRemark,
      visGrants,
      btnShow,
      excelLoading,
    } = this.state;

    const menu = (
      <Menu>
        {checkPermissions('business:insCardHdl:uploadExcelAdd') && (
          <Menu.Item>
            <Link to="/socialinsurancemanagement/socialcard/addbatch"> 批量新增</Link>
          </Menu.Item>
        )}
        <Menu.Item>
          <a onClick={this.outExcel} loading={excelLoading}>
            导出
          </a>
        </Menu.Item>
      </Menu>
    );
    const hdlMenu = (
      <Menu>
        {checkPermissions('business:insCardHdl:uploadExcelEnd') && (
          <Menu.Item>
            <a onClick={this.hdlExport}>办理结果导入</a>
          </Menu.Item>
        )}
        {checkPermissions('business:insCardHdl:execEndInsCardHdl') && (
          <Menu.Item>
            <a onClick={this.toDealCompleteBatch}>标记办理成功</a>
          </Menu.Item>
        )}
      </Menu>
    );
    const menuDeal = record => (
      <Menu>
        {checkPermissions('business:insCardHdl:updateInsCardHdl') && (
          <Menu.Item key="update">
            <Link
              to={`/socialinsurancemanagement/socialcard/update?insCardHdlId=${
                record.insCardHdlId
              }&&tabKey=${activeKey}`}
            >
              修改
            </Link>
          </Menu.Item>
        )}
        {checkPermissions('business:insCardHdl:execCanclInsCardHdl') && (
          <Menu.Item onClick={() => this.cancelDeal(record.insCardHdlId, record.vno)}>
            取消办理
          </Menu.Item>
        )}
        <Menu.Item onClick={() => this.hdlRemark(record.insCardHdlId)}>办理备注</Menu.Item>
      </Menu>
    );
    const menuComplete = record => (
      <Menu>
        <Menu.Item key="detail">
          <Link
            to={`/socialinsurancemanagement/socialcard/detail?insCardHdlId=${record.insCardHdlId}`}
          >
            查看
          </Link>
        </Menu.Item>
        <Menu.Item onClick={() => this.hdlRemark(record.insCardHdlId)}>办理备注</Menu.Item>
      </Menu>
    );
    const grantMenu = (
      <Menu>
        {checkPermissions('business:insCardHdl:uploadExcelIssue') && (
          <Menu.Item>
            <a onClick={this.grantExport}>发放信息导入</a>
          </Menu.Item>
        )}
        {checkPermissions('business:insCardHdl:execIssueInsCardHdl') && (
          <Menu.Item>
            <a onClick={this.grantsBatch}>标记发放完成</a>
          </Menu.Item>
        )}
      </Menu>
    );

    const columnsDeal = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: { fontWeight: 'bold' },
        }),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { width: 150, textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <Fragment>
            <Link
              to={`/socialinsurancemanagement/socialcard/detail?insCardHdlId=${
                record.insCardHdlId
              }`}
            >
              查看
            </Link>
            <Divider type="vertical" />
            {checkPermissions([
              'business:insCardHdl:updateInsCardHdl',
              'business:insCardHdl:execCanclInsCardHdl',
              '',
            ]) ? (
              <Dropdown overlay={menuDeal(record)}>
                <a>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            ) : (
              <a onClick={() => this.hdlRemark(record.insCardHdlId)}>办理备注</a>
            )}
          </Fragment>
        ),
      },
    ];
    const columnsProcess = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => (
          <Fragment>
            <Link
              to={`/socialinsurancemanagement/socialcard/detail?insCardHdlId=${
                record.insCardHdlId
              }`}
            >
              查看
            </Link>
            <Divider type="vertical" />
            {checkPermissions([
              'business:insCardHdl:updateInsCardHdl',
              'business:insCardHdl:execCanclInsCardHdl',
              '',
            ]) ? (
              <Dropdown overlay={menuDeal(record)}>
                <a>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            ) : (
              <a onClick={() => this.hdlRemark(record.insCardHdlId)}>办理备注</a>
            )}
          </Fragment>
        ),
      },
    ];
    const columnsComplete = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '发放方式',
        dataIndex: 'issWayName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) => (record.issWayName ? <span>{record.issWayName}</span> : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => (
          <Fragment>
            <Authorized authority="business:insCardHdl:execIssueInsCardHdl" noMatch={null}>
              {record.issWayName ? null : (
                <span>
                  <a onClick={() => this.grant(record)}>发放</a>
                  <Divider type="vertical" />
                </span>
              )}
            </Authorized>
            {checkPermissions('business:insCardHdl:execIssueInsCardHdl') ? (
              <Dropdown overlay={menuComplete(record)}>
                <a>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            ) : (
              <Fragment>
                <Link
                  to={`/socialinsurancemanagement/socialcard/detail?insCardHdlId=${
                    record.insCardHdlId
                  }`}
                >
                  查看
                </Link>
                <Divider type="vertical" />
                <a onClick={() => this.hdlRemark(record.insCardHdlId)}>办理备注</a>
              </Fragment>
            )}
          </Fragment>
        ),
      },
    ];
    const columnsCancel = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 170,
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '操作',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
            width: 150,
          },
        }),
        render: (text, record) => (
          <Fragment>
            <Link
              to={`/socialinsurancemanagement/socialcard/detail?insCardHdlId=${
                record.insCardHdlId
              }`}
            >
              查看
            </Link>
          </Fragment>
        ),
      },
    ];
    const tabPane1 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            <Authorized authority="business:insCardHdl:addInsCardHdl" noMatch={null}>
              <Link to="/socialinsurancemanagement/socialcard/add">
                <Button type="primary" style={{ marginRight: 8 }}>
                  <PlusOutlined className={styles.iconStyle} />
                  新增
                </Button>
              </Link>
            </Authorized>
            <Authorized authority="business:insCardHdl:execBeginInsCardHdl" noMatch={null}>
              <Button onClick={this.toDealBatch} style={{ marginRight: 8 }} type="primary">
                开始办理
              </Button>
            </Authorized>
            <Dropdown overlay={menu}>
              <Button style={{ marginRight: 8 }}>
                更多
                <DownOutlined style={{ fontSize: 12 }} />
              </Button>
            </Dropdown>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="insCardHdlId"
          columns={columnsDeal}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            <Authorized authority="business:insCardHdl:execEndInsCardHdl" noMatch={null}>
              <Dropdown overlay={hdlMenu} className={styles.listBtn}>
                <Button type="primary" style={{ marginRight: 8 }}>
                  办理完成
                </Button>
              </Dropdown>
            </Authorized>
            <Button onClick={this.outExcel} style={{ marginRight: 8 }} loading={excelLoading}>
              {!excelLoading && <DownloadOutlined />}
              导出
            </Button>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="insCardHdlId"
          columns={columnsProcess}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane3 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            {checkPermissions('business:insCardHdl:execIssueInsCardHdl') ? (
              <Dropdown overlay={grantMenu} className={styles.listBtn}>
                <Button type="primary" style={{ marginRight: 8 }}>
                  发放
                </Button>
              </Dropdown>
            ) : null}

            <Button
              onClick={this.outExcel}
              style={{ marginRight: 8 }}
              type={checkPermissions('business:insCardHdl:execIssueInsCardHdl') ? null : 'primary'}
              loading={excelLoading}
            >
              {!excelLoading && <DownloadOutlined />}
              导出
            </Button>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="insCardHdlId"
          columns={columnsComplete}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Col span={10} offset={0}>
            <Button
              onClick={this.outExcel}
              style={{ marginRight: 8 }}
              type="primary"
              loading={excelLoading}
            >
              {!excelLoading && <DownloadOutlined />}
              导出
            </Button>
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="insCardHdlId"
          columns={columnsCancel}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPaneTem = ['', tabPane1, tabPane2, tabPane3, tabPane4];
    const formItemLayout = {
      labelCol: {
        xl: {
          span: 6,
        },
      },
      wrapperCol: {
        xl: {
          span: 18,
        },
      },
    };
    const issWayList = issWayArr.map(options => (
      <Radio value={options.itemCode} key={options.itemCode}>
        {options.itemName}
      </Radio>
    ));

    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
            {tabList.map(pane => (
              <TabPane tab={pane.itemName} key={pane.itemCode}>
                {tabPaneTem[pane.itemCode]}
              </TabPane>
            ))}
          </Tabs>
        </Card>
        <ServiceRemark
          visHdlRemark={visHdlRemark}
          handleModalVisible={this.handleModalVisible}
          submitData={this.submitData}
          detailHdl={detailHdl}
        />

        <Modal title="发放" visible={visGrants} onOk={this.okGrants} onCancel={this.cancelGrants}>
          <Form>
            <Row>
              <Col>
                <FormItem
                  {...formItemLayout}
                  label={
                    <span>
                      <span style={{ color: 'red', marginRight: 3 }}>*</span>发放方式
                    </span>
                  }
                >
                  {getFieldDecorator('issWay', {
                    rules: [
                      {
                        required: false,
                      },
                    ],
                    initialValue: '1',
                  })(
                    <RadioGroup onChange={this.onChangeIssWay} style={{ marginLeft: 20 }}>
                      {issWayList}
                    </RadioGroup>
                  )}
                </FormItem>
              </Col>
            </Row>
            {Number(btnShow) === 2 ? (
              <Row>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label={<span>邮寄地址</span>}>
                      {getFieldDecorator('exprsAddr', {
                        rules: [
                          {
                            required: flag,
                            message: '请输入邮寄地址',
                          },
                        ],
                      })(<Input placeholder="请输入" />)}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label={<span>快递单号</span>}>
                      {getFieldDecorator('exprsNo', {
                        rules: [
                          {
                            required: flag,
                            message: '请输入快递单号',
                          },
                        ],
                      })(<Input placeholder="请输入" />)}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label={<span>快递公司</span>}>
                      {getFieldDecorator('exprsCorpName', {
                        rules: [
                          {
                            required: flag,
                            message: '请输入快递公司',
                          },
                        ],
                      })(<Input placeholder="请输入" />)}
                    </FormItem>
                  </Col>
                </Row>
              </Row>
            ) : null}
            <Row>
              <Col>
                <FormItem {...formItemLayout} label={<span>发放备注</span>}>
                  {getFieldDecorator('issRemark', {
                    rules: [
                      {
                        required: false,
                        message: '请输入不得超过100字的备注',
                      },
                    ],
                  })(<TextArea placeholder="请输入备注" style={{ height: 100 }} />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
